<template>
  <j-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="真实姓名">
                <a-input placeholder="请输入真实姓名" v-model="queryParam.realName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="技术栈">
                <j-dict-select-tag placeholder="请选择技术栈" v-model="queryParam.stacks" dictCode="stacks"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"
          @change="handleTableChange">

          <template slot="stacksSlot" slot-scope="text">
            <j-dict-select-tag :value="text" dictCode="stacks" disabled/>
          </template>
        </a-table>
      </div>
      <!-- table区域-end -->
    </a-spin>
  </j-modal>
</template>

<script>
  import { getAction } from '@/api/manage'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'

  export default {
    name: "SelectProgrammerModal",
    components: {
      JDictSelectTag
    },
    data () {
      return {
        title: "选择程序员",
        visible: false,
        confirmLoading: false,
        selectedRowKeys: [],
        selectedProgrammer: null,
        // 查询条件
        queryParam: {
          realName: '',
          stacks: ''
        },
        // 表头
        columns: [
          {
            title: '真实姓名',
            align:"center",
            dataIndex: 'realName'
          },
          {
            title: '技术栈',
            align:"center",
            dataIndex: 'stacks',
            scopedSlots: { customRender: 'stacksSlot' }
          },
          {
            title: '联系电话',
            align:"center",
            dataIndex: 'phone'
          },
          {
            title: '程序价格(元)',
            align:"center",
            dataIndex: 'programPrice'
          },
          {
            title: '论文价格(元)',
            align:"center",
            dataIndex: 'paperPrice'
          }
        ],
        // 数据集
        dataSource: [],
        // 分页参数
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        loading: false,
        url: {
          list: "/order/bProgrammerInfo/list"
        }
      }
    },
    methods: {
      show() {
        this.visible = true;
        this.loadData();
      },
      close() {
        this.visible = false;
        this.selectedRowKeys = [];
        this.selectedProgrammer = null;
      },
      handleOk() {
        if (!this.selectedProgrammer) {
          this.$message.warning('请选择一个程序员');
          return;
        }
        this.$emit('select', this.selectedProgrammer);
        this.close();
      },
      handleCancel() {
        this.close();
      },
      // 加载数据
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        // 加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams(); // 查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records || res.result;
            this.ipagination.total = res.result.total || 0;
          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.loading = false;
        });
      },
      // 获取查询条件
      getQueryParams() {
        let param = Object.assign({}, this.queryParam);
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return param;
      },
      // 选择行改变
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys;
        if (selectedRows && selectedRows.length > 0) {
          this.selectedProgrammer = selectedRows[0];
        } else {
          this.selectedProgrammer = null;
        }
      },
      // 表格改变事件
      handleTableChange(pagination, filters, sorter) {
        this.ipagination.current = pagination.current;
        this.ipagination.pageSize = pagination.pageSize;
        this.loadData();
      },
      // 查询
      searchQuery() {
        this.loadData(1);
      },
      // 重置
      searchReset() {
        this.queryParam = {
          realName: '',
          stacks: ''
        };
        this.loadData(1);
      }
    }
  }
</script>

<style scoped>
  .table-page-search-wrapper {
    margin-bottom: 16px;
  }
</style> 